<template>
  <div class="photoinfo-container">
    <h3 class="title">{{photoinfo.title}}</h3>
    <p class="subtitle">
      <span>发表时间:{{photoinfo.add_time | dateFormat}}</span>
      <span>点击:{{photoinfo.click}}次</span>
    </p>
    <hr>
    <!--缩略图-->
    <div class="thumbs">
      <vue-preview :slides="list" @close="handleClose"></vue-preview>
    </div>

    <!--图片内容-->
    <div class="content" v-html="photoinfo.content"></div>

    <!--评论子组件-->
    <comment-box :id="id"></comment-box>
  </div>
</template>

<script>
  import {Toast} from 'mint-ui';
  //导入评论子组件
  import comment from '../subcomponents/comment.vue';

  export default {
    data() {
      return {
        id: this.$route.params.id,//从url中获取的id
        photoinfo: {},//图片详情对象
        list: []//缩略图数组
      }
    },
    created() {
      this.getThumbs();
      this.getPhotoInfo();
    },
    methods: {
      getPhotoInfo() {
        //获取图片详情
        this.$http.get('api/getimageInfo/' + this.id)
          .then(result => {
            if (result.body.status === 0) {
              this.photoinfo = result.body.message[0];
            } else {
              Toast('获取图片信息失败');
            }
          });
      },
      getThumbs() {
        //获取缩略图
        this.$http.get('api/getthumimages/' + this.id)
          .then(result => {
            if (result.body.status === 0) {
              //循环遍历数组，为每个图片对象添加w,h属性
              result.body.message.forEach(item => {
                item.msrc = item.src;//必要的
                item.w = 600;
                item.h = 400;
              });
              this.list = result.body.message;
            } else {
              Toast('获取缩略图失败');
            }
          });
      },
      handleClose() {
        console.log('close event')
      }
    },
    components: {//注册子组件的节点
      'comment-box': comment
    }
  }

</script>

<style lang="scss" scoped>
  .photoinfo-container {
    padding: 3px;

    .title {
      color: #22b0ff;
      font-size: 15px;
      text-align: center;
      margin: 15px;
    }

    .subtitle {
      display: flex;
      justify-content: space-between;
      font-size: 13px;
    }

    .content {
      font-size: 14px;
      line-height: 30px;
    }

    .thumbs {
      .my-gallery {
        display: flex;
        flex-wrap: wrap;

        figure {
          width: 30%;
          margin: 5px;

          img {
            width: 100%;
          }
        }
      }
    }


  }


</style>